<template>
	<el-container>
		<el-menu :default-active="active" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
			@select="indexarr" router :collapse="isCollapse">
			<el-tooltip class="item" effect="dark" content="首页" placement="right">
				<el-menu-item index="/dashboard">
					<i class="el-icon-s-home"></i>
					<span slot="title">首页</span>
				</el-menu-item>
			</el-tooltip>
			<el-submenu index="1">
				<template slot="title">
					<i class="el-icon-s-marketing"></i>
					<span slot="title">运营管理</span>
				</template>
				<el-menu-item-group style="background-color: #324157">
					<el-menu-item index="/operation/order">订单管理</el-menu-item>
					<el-menu-item index="/operation/comment">评论管理</el-menu-item>
					<el-menu-item index="/operation/freight">运费模板管理</el-menu-item>
				</el-menu-item-group>
			</el-submenu>
			<el-submenu index="2">
				<template slot="title">
					<i class="el-icon-s-shop"></i>
					<span slot="title">商品管理</span>
				</template>
				<el-menu-item-group style="background-color: #324157">
					<el-menu-item index="/goods/commodity">商品列表</el-menu-item>
					<el-menu-item index="/goods/classify">商品类目</el-menu-item>
				</el-menu-item-group>
			</el-submenu>
			<el-submenu index="3">
				<template slot="title">
					<i class="el-icon-coin"></i>
					<span slot="title">推广管理</span>
				</template>
				<el-menu-item-group style="background-color: #324157">
					<el-menu-item index="/promotion/loog">商铺广告</el-menu-item>
					<el-menu-item index="/promotion/discounts">推荐管理</el-menu-item>
					<el-menu-item index="/promotion/recommend">优惠卷管理</el-menu-item>
					<el-menu-item index="/promotion/shop">商铺信息</el-menu-item>
				</el-menu-item-group>
			</el-submenu>
			<el-submenu index="4">
				<template slot="title">
					<i class="el-icon-s-tools"></i>
					<span slot="title">系统管理</span>
				</template>
				<el-menu-item-group style="background-color: #324157">
					<el-menu-item index="/system/member">会员管理</el-menu-item>
					<el-menu-item index="/system/administrator">管理员</el-menu-item>
					<el-menu-item index="/system/role">角色管理</el-menu-item>
				</el-menu-item-group>
			</el-submenu>
		</el-menu>
		<el-container>
			<el-header>
				<el-radio-group v-model="isCollapse" class="annu-group">
					<i @click="onclicK" :style="
                isCollapse == false
                  ? 'transform:rotate(0deg)'
                  : 'transform:rotate(180deg)'
              " class="el-icon-s-fold"></i>
				</el-radio-group>
				<el-breadcrumb class="arrow_right" separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/About' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item v-if="$route.meta.title == undefined ? false : true">{{ $route.meta.title }}
					</el-breadcrumb-item>
					<el-breadcrumb-item v-if="$route.meta.title1 == '首页' ? false : true">{{ $route.meta.title1 }}
					</el-breadcrumb-item>
				</el-breadcrumb>
				<div class="gongnen">
					<el-tooltip content="全屏" placement="bottom" effect="light">
						<Fullscreen></Fullscreen>
					</el-tooltip>
					<el-tooltip content="皮肤" placement="bottom" effect="light">
						<ThemePicker v-model="color1"></ThemePicker>
					</el-tooltip>
					<el-tooltip content="中英文切换" placement="bottom" effect="light">
						<div class="img_yingw"></div>
					</el-tooltip>
					<el-dropdown trigger="click" @command="handleCommand">
						<span class="el-dropdown-link">
							<i class="el-icon-user-solid"></i><i class="el-icon-arrow-down"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="About">首页</el-dropdown-item>
							<el-dropdown-item command="back">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</el-header>
			<el-header class="arr-header">
				<Dynamic :message="arrlist"></Dynamic>
			</el-header>
			<el-main style="background-color: #F0F2F5;">
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	import ThemePicker from '../components/function/ThemePicker.vue' //全局换肤
	import Dynamic from '../components/function/Tagenca.vue' //功能键
	import Fullscreen from '../components/function/Fullscreen.vue' //全屏
	export default {
		components: {
			Fullscreen,
			ThemePicker,
			Dynamic,
		},
		data() {
			return {
				isCollapse: false,
				color1: "#409EFF",
				active: "/About",
				arrlist: [],
				top: 0,
				left: 0,
				Operation:[],
			};
		},
		created() { //生命周期
			this.active = this.$route.path;
			this.indexarr(this.$route.path);
			this.onRouteChanged()
		},
		methods: {
			onRouteChanged() {
				// 自定义组件数组
				let num = true;
				for (let i = 0; i < this.arrlist.length; i++) {
					if (this.arrlist[i].name == this.$route.meta.title || this.$route.path == "/Refresh") {
						num = false
					}
				}
				// console.log(this.arrlist)
				if (num) {
					this.arrlist.push({
						name: this.$route.meta.title1,
						path: this.$route.path
					})
				}
			},
			handleCommand(command) { //退出登录
				if (command == "back") {
					sessionStorage.removeItem('token')
					this.$router.replace("/Home");
				} else if (command == "About") {
					for (var i = 0; i < this.arrlist.length; i++) {
						if (this.active == "/About") {
							this.$router.replace("/About");
							this.active = "/About";
							break;
						} else {
							this.arrlist.push({
								name: "首页",
								path: "/About",
							});
							this.$router.replace("/About");
							this.active = "/About";
							break;
						}
					}
				}
			},
			indexarr(index) { //点击子模块去重
				setTimeout(() => {
					let arr = this.arrlist.findIndex((c) => c.path == index);
					if (arr == -1) {
						this.arrlist.push({
							name: this.$route.meta.title1,
							path: index,
						});
					}
				}, 10)
			},
			onclicK() { //左边模块隐藏显示
				this.isCollapse = !this.isCollapse;
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
		},
	};
</script>

<style lang="scss" scoped="scoped">
	.el-container {
		height: 100vh;
	}

	.right {

		float: right;
		width: 60px;
	}

	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.arr-header {
		width: 100%;
		height: 45px !important;
		line-height: 30px;
		border-top: 1px solid #dcdfe6;
		border-bottom: 1px solid #dcdfe6;
	}

	.el-icon-arrow-down {
		position: absolute;
		right: -15px;
		bottom: 10px;
	}

	.el-icon-user-solid {
		width: 40px;
		height: 40px;
		font-size: 40px;
	}

	.img_yingw {
		width: 40px;
		height: 40px;
		background: url(../assets/zhongyingwen.png);
		background-size: 100% 100%;
	}

	.el-header {
		width: 100%;
		height: 60px;
	}

	.gongnen {
		margin-top: 10px;
		width: 250px;
		height: 40px;
		float: right;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
	}

	.el-aside {
		color: #333;
	}

	.el-menu-vertical-demo {
		background-color: #324157;
		min-height: 100vh;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 100vh;
		background: #324157;
	}

	.el-menu-item {
		color: #bfcbd9;
	}

	.el-menu-vertical-demo span {
		color: #bfcbd9;
	}

	.arrow_right {
		float: left;
		width: 260px;
		height: 60px;
		margin-left: 20px;
		line-height: 60px;
	}

	.annu-group {
		float: left;
		position: relative;
		top: 20px;
		left: -20px;
	}

	.el-icon-s-fold {
		width: 20px;
		height: 20px;
		font-size: 20px;
		position: absolute;
	}

	.contextmenu {
		background: #FFF;
		position: fixed;
		list-style: none;
		width: 90px;
		border-radius: 10px;
	}

	.contextmenu>li {
		font-size: 12px;
		padding-left: 15px;
		line-height: 32px;
	}

	.contextmenu>li:hover {
		background: rgb(226, 224, 224);
	}
</style>
